<template>
  <view class="terminal">
    <view class="flex terminal__item">
      <view class="terminal__item-num" @click="goStatistic()">
        <view class="terminal__tip">终端台数(台)</view>
        <view class="terminal__text-center">{{ terminalData.totalNum }}</view>
        <view class="terminal__sub-item">
          <view class="">
            <view class="">{{ terminalData.yesterdayActiveNum }}</view>
            <view class="">昨日激活</view>
          </view>
          <view class="">
            <view class="">{{ terminalData.yesterdayBindNum }}</view>
            <view class="">昨日绑定</view>
          </view>
        </view>
      </view>
      <view class="terminal__item-active" @click="goActiveStatistic()">
        <view class="terminal__tip">总激活(台)</view>
        <view class="terminal__text-center">{{
          terminalData.totalActiveNum
        }}</view>
        <view class="terminal__sub-item">
          <view class="">
            <view class="">{{ terminalData.myActiveNum }}</view>
            <view class="">直营激活</view>
          </view>
          <view class="">
            <view class="">{{ terminalData.subActiveNum }}</view>
            <view class="">下级激活</view>
          </view>
        </view>
      </view>
    </view>

    <u-cell-group class="mt-20 terminal__container" :border="false">
      <u-cell-item
        @click="goTerminalState()"
        :title-style="{ color: '#333333' }"
        title="终端状态"
        :border-bottom="false"
        bg-color="#f6f6f6"
        class="terminal__sub"
      >
        <image
          :title-style="{ color: '#333333' }"
          class="icon mr-20"
          slot="icon"
          src="@/static/image/home/img_terminal_status.png"
        />
      </u-cell-item>
      <u-cell-item
        @click="goTerminalQueryIssue()"
        :title-style="{ color: '#333333' }"
        title="终端分拨"
        :border-bottom="false"
        bg-color="#f6f6f6"
        class="terminal__sub"
      >
        <image
          :title-style="{ color: '#333333' }"
          class="icon mr-20"
          slot="icon"
          src="@/static/image/home/img_terminal_allocated.png"
        />
      </u-cell-item>
      <u-cell-item
        @click="goTerminalQueryRecover()"
        :title-style="{ color: '#333333' }"
        title="终端回拨"
        :border-bottom="false"
        bg-color="#f6f6f6"
        class="terminal__sub"
      >
        <image
          :title-style="{ color: '#333333' }"
          class="icon mr-20"
          slot="icon"
          src="@/static/image/home/img_terminal_return.png"
        />
      </u-cell-item>
    </u-cell-group>
  </view>
</template>

<script>
export default {
  data() {
    return {
      terminalData: {},
    };
  },
  mounted() {
    this.terminalTopStat();
  },
  methods: {
    terminalTopStat() {
      this.$zx.terminal_api.terminalTopStat().then((data) => {
        console.log('terminalTopStat----->99', data);
        this.terminalData = data;
      });
    },
    goStatistic() {
      this.$u.route('pages/main/terminal/amountStatistic');
    },
    goActiveStatistic() {
      this.$u.route('pages/main/terminal/activeStatistic');
    },
    goTerminalState() {
      this.$u.route('pages/main/terminal/terminalStateList');
    },
    goTerminalQueryIssue() {
      this.$u.route('pages/main/terminal/terminalInfoQueryIssueList');
    },
    goTerminalQueryRecover() {
      this.$u.route('pages/main/terminal/terminalInfoQueryRecoverList');
      // this.$u.route('pages/main/terminal/terminalInfoQueryRecover');
    },
  },
};
</script>

<style scoped lang="scss">
.terminal {
  background-color: white;
  height: 100vh;

  &__item {
    height: 268rpx;
    padding-top: 20rpx;
    display: flex;
    justify-content: space-around;
    color: white;
  }

  &__item-num {
    background-image: url('/static/image/home/img_terminal_bg_2.png');
    width: 334rpx;
    background-position: 50% 50%;

    padding: 20rpx;
    border-radius: 20rpx;
  }

  &__item-active {
    background-image: url('/static/image/home/img_terminal_bg_1.png');
    width: 334rpx;
    background-position: 50% 50%;

    padding: 20rpx;
    border-radius: 20rpx;
  }

  &__tip {
    font-size: 12px;
  }

  &__text-center {
    text-align: center;
    font-size: 22px;
    font-weight: bold;
    margin-top: 30rpx;
  }

  &__sub-item {
    margin-top: 30rpx;
    display: flex;
    text-align: center;
    font-size: 12px;
    justify-content: space-between;
  }

  .icon {
    width: 60rpx;
    height: 60rpx;
  }

  &__container {
    padding: 20rpx;
  }

  &__sub {
    margin-bottom: 20rpx;
    border-radius: 20rpx;
  }
}
</style>
